<template>
	<view class="uni_box home">
		<navbar title='邀请好友'>
		</navbar>
		<view class="content">
			<view class="shiliview">
				<swiper  class="swiper-block-shili"  :interval="3000" :duration="1000" @change="swiperChange"  previous-margin='90rpx' next-margin='90rpx' :indicator-dots="true" indicator-active-color="rgba(58, 166, 246, 1)" indicator-color="rgba(238, 238, 238, 1)">
					<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item-shili"  @click="previewImage(index, item)">
						<!-- <image :src="item.image"  :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill" ></image> -->
						<view class="skaoview" :class="['slide-image', currentIndex === index?'active':'']">
							<image :src="item.image?item.image:'/static/img/yaobg.png'" class="kaooneimg" mode=""></image>
							<!-- <view class="jinpai">
								<text class="jinname">Thomas</text>
								<view class="bqian">
									<text class="qianitem">融跃金牌讲师</text>
									<text class="qianitem">国内知名CFA讲师</text>
								</view>
							</view> -->
						</view>
					</swiper-item>
				</swiper>

			</view>
			<view class="yaotwo">
				<u-parse :html="guicontent" :tag-style="style"></u-parse>
				<!-- <text>1、可以直接复制邀请码给好友下载聚优项APP注册填写</text>
				<text>2、专属海报中的二维码和邀请链接已经包含您的邀请信息</text>
				<text>3、好友通过您的邀请码或者邀请海报注册会员并下载APP后，Ta将永久成为您的下级会员，未来Ta产生的订单佣金您都有奖励，会自动计入您的账号中!</text> -->
			</view>
			<view class="yaothree">
				<view class="yaoitem" @click="btnClick(2)">
					<image class="yaoone" src="@/pages_client/static/img/icon_fx_bc.png" mode="" />
					<text>保存图片</text>
				</view>
				<view class="yaoitem fen">
					<button open-type="share"  class="yaoleft">
						<image class="yaoone" src="@/pages_client/static/img/icon_fx_wx.png" mode="" />
						<text>分享好友</text>
					</button>
					
				</view>
				<view class="yaoitem pen" @click="btnClick(3)">
					<image class="yaoone" src="@/pages_client/static/img/icon_fx_pyq.png" mode="" />
					<text>分享朋友圈</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabcurrent:0,
				currentIndex: 0,
				style: {
						img: 'width:max-width:100%;height:auto;pointer-events: none;'
				},
				posterData:[
					'/static/img/yaobg.png',
					'/static/img/yaobg.png',
					'/static/img/yaobg.png'
					// 'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					// 'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					// 'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				],
				info:{

				},
				list:[],
				guicontent:'',
				user:{}
			}
		},
		onLoad() {
			this.getinit()
			// this.getxieyi()
			this.getuserinfo();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '东方蓉妍',
				imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		onShareTimeline(){
			return {
				title: '东方蓉妍',
				imageUrl:this.list[this.currentIndex].image,
				path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
			}
		},
		onShow() {
		},
		methods: {
			async getinit(){
				let res = await this.$u.api.getposter({
					poster_id:'1'
				});
				// let data = []
				// let a = {}
				// for(let i in res){
				// 	a.image = res[i].image
				// }
				// data.push(a)
				this.list = res
				console.log(this.list)
			},
			async getuserinfo(){
				let res = await this.$u.api.getData({
				});
				this.user = res.data
			},
			btnClick(e){
				console.log(e)
				if(e == 1){
					//复制邀请码
					this.copy(this.user.code)
				}else if(e == 3){
					uni.showToast({
						title: '点击右上角转发朋友圈',
						icon: 'none'
					});
					// // #ifdef MP-WEIXIN
					// this.saveImage(this.list[this.currentIndex].image)
					// // #endif
					// // #ifdef H5
					// let a= []
					// let list = this.list
					// a.push(list[this.currentIndex].image)
					// uni.previewImage({
					// 	current: list[this.currentIndex].image, //预览图片的下标
					// 	urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					// })
					// // #endif
				}else if(e == 2){
					//保存图片
					//保存相册
					// #ifdef MP-WEIXIN
					this.saveImage(this.list[this.currentIndex].image)
					// #endif
					// #ifdef H5
					let a= []
					let list = this.list
					a.push(list[this.currentIndex].image)
					uni.previewImage({
						current: list[this.currentIndex].image, //预览图片的下标
						urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					})
					// #endif
				}
			},
			saveImage(image) {
				// 图片地址
				const imgUrl = image;
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							// 已授权，直接下载保存图片
							this.downloadAndSaveImage(imgUrl);
						} else {
							// 未授权，请求授权
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									// 授权成功，下载保存图片
									this.downloadAndSaveImage(imgUrl);
								},
								fail: () => {
									// 授权失败，提示用户
									uni.showToast({
										title: '请授权相册权限以保存图片',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			downloadAndSaveImage(imgUrl) {
				uni.downloadFile({
					url: imgUrl,
					success: (downloadRes) => {
						console.log(downloadRes)
						if (downloadRes.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: downloadRes.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'success'
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '图片保存失败：' + err.errMsg,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			},
			loadBase64Url() {
				this.saveImage(this.list[this.currentIndex].image)
			},
			// 保存图片到手机相册
			// saveImage(filePath) {
			// 	let that = this
			// 	uni.saveImageToPhotosAlbum({
			// 		filePath, // 需要临时文件路径，base64无法保存
			// 		success: () => {
			// 		uni.showToast({
			// 			title: '保存图片成功',
			// 			icon: 'none',
			// 			duration: 1000
			// 		});
			// 		},
			// 		fail: () => {
			// 		uni.showToast({
			// 			title: '保存失败，请重试',
			// 			icon: 'none',
			// 			duration: 1000
			// 		});
			// 		}
			// 	});
			// },
			async getxieyi(){
				let res = await this.$u.api.getContent({
					code:'yaoqinghaoyou'
				});
				// this.title = res.title
				this.guicontent = res.content
			},
			swiperChange(event) {
				console.log(event)
				this.currentIndex = event.detail.current
				// this.currentPoster = this.posterData.poster[this.currentIndex]
				// console.log(this.currentPoster)
			},
			previewImage(index, item){
				// console.log('index', index)
				let a= []
				let list = this.list
				for(let i in list){
					a.push(list[i].image)
				}
				uni.previewImage({
					current: item.image, //预览图片的下标
					urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		min-height: 100vh;
		padding-bottom: 100rpx;
		.shiliview{
		// margin-top: 30rpx;
		.swiper-block-shili {
			height: 1050rpx;
			width: 100%;
			.swiper-item-shili {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				overflow: unset;
				position: relative;
				.skaoview{
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202,205,217,0.4);
					border-radius: 10rpx;
					border: 1px solid #EEEEEE;
					position: relative;
					.kaooneimg{
						height: 100%;
						position: relative;
						width: 100%;
					}
					.jinpai{
						padding: 30rpx;
						display: flex;
						flex-direction: column;
						.jinname{
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 32rpx;
							color: #111111;
							display: block;
							margin-bottom: 15rpx;
						}
						.bqian{
							display: flex;
							flex-direction: row;
							.qianitem{
								padding: 6rpx 10rpx;
								background: #FEF6F2;
								border-radius: 4rpx;
								border: 1px solid #FFDDCC;
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #FA7938;
								display: inline-block;
								margin-right: 10rpx;
							}
						}
					}
				}
				.slide-image {
					height: 800rpx;
					width: 500rpx;
					border-radius: 9rpx;
					// box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
					margin: 0rpx 40rpx;
					z-index: 1;
				}
				.active {
					transform: scale(1.14);
					transition: all 0.2s ease-in 0s;
					z-index: 20;
					}
				}
		}
		.uni-swiper-dots-horizontal {
			bottom: 3px;
		}

	}
	.yaotwo{
		
		display: block;
		margin: 30rpx 50rpx;
		text{
			display: block;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
	}
	.yaothree{
		display: flex;
		margin: 50rpx 30rpx;
		flex-direction: row;
		justify-content: space-between;
		.yaoitem{
			width: 30%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background: #F3F3F3;
			border-radius: 18rpx;
			min-height: 90rpx;
			position: relative;
			.yaoone{
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			text{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
		}
		.fen{
			background: #FFA64F;
			text{
				color: #fff;
			}
		}
		.pen{
			background: #FF7C41;
			text{
				color: #fff;
			}
		}
	}
	}
	.yaoleft{
        background-color: transparent;
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        line-height: normal;
        padding: 0;
        margin: 0;
    }
</style>
